<template>
	<view class="charge-container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="header-phone-stauts-show"></view>
		<!-- #endif -->
		<!-- 标题栏 -->
		<cl-topbar title="会员充值" background-color='#f7f7f7' :border='false'></cl-topbar>
		<!-- 充值框 -->
		<view class="charge">
			<!-- 现有余额 -->
			<view class="balance">
				<view class="balance-container">
					<span class='money'>￥<span>128</span></span>
					<span class='balance-text'>余额</span>
				</view>
			</view>
			<!-- 标题说明 -->
			<view class="charge-content">
				在常用的社交分享组件中，微信（微信好友和朋友圈）、微博、QQ（QQ
				在常用的社交分享组件中，微信（微信好友和朋友圈）、微博、QQ（QQ
			</view>
			<!-- 充值的按钮 -->
			<view class="charge-price-choice-btns">
				<view class="charge-btn active">
					<span class='charge-number'>300元</span>
					<span class='present-number'>送50元</span>
				</view>
				<view class="charge-btn">
					<span class='charge-number'>300元</span>
					<span class='present-number'>送50元</span>
				</view>
				<view class="charge-btn">
					<span class='charge-number'>300元</span>
					<span class='present-number'>送50元</span>
				</view>
			</view>
			<!-- 说明和价钱 -->
			<view class="description">
				<span class='desc-title'>套餐说明：</span>
				<view class='desc-detail'>
					<span>在常用的社交分享组件中，友和朋友圈）、微博、QQ在常用的社交分享组件中，友和朋友圈）、微博、QQ在常用的社交分享组件中，友和朋友圈）、微博、QQ在常用的社交分享组件中，友和朋友圈）、微博、QQ</span>
				</view>
				<view class='pay-money-number flex-start'>
					<span class='text'>支付金额：</span>
					<span class='num'>300元</span>
				</view>
				<view class='get-money-number flex-start'>
					<span class='text'>支付金额：</span>
					<span class='num'>330元</span>
				</view>
			</view>
		</view>

		<!-- 充值按钮 -->
		<view class="charge-now-btn">
			立即充值
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			uni.loadFontFace({
				global: true,
				family: 'charge',
				source: 'url("/static/fonts/pages/charge/YouSheBiaoTiHei-2.ttf")',
				success() {
					console.log('充值界面引入字体成功')
				},
				fail(e) {
					console.log('充值界面' + e);
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.charge-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: $pages-background-color;

		//微信小程序独有的头部展示
		.header-phone-stauts-show {
			width: 100%;
			height: 40rpx;
			background-color: #f7f7f7;
		}


		.charge {
			margin: 0 auto;
			margin-top: 40rpx;
			width: 700rpx;
			height: 740rpx;
			background-color: $white-notion;
			border-radius: 24rpx;
			overflow: hidden;
			display: grid;
			grid-template-rows: 170rpx 120rpx 180rpx auto;

			// 现有余额
			.balance {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					content: "";
					display: block;
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 0;
					opacity: 0.5;
					border-bottom: 1rpx solid $shadow-color;
				}


				.balance-container {
					height: 80%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-family: 'charge';

					.money {
						font-size: 36rpx;
						font-weight: 500;
						color: $number-rich;

						span {
							font-size: 48rpx;
						}
					}

					.balance-text {
						font-size: 32rpx;
						font-weight: 400;
						color: $list-content;
					}
				}
			}

			// 标题说明
			.charge-content {
				padding: 6rpx 40rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: $list-content;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; //溢出内容隐藏
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 3; //行数
				line-clamp: 3;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
			}

			// 充值的按钮
			.charge-price-choice-btns {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				font-family: 'charge';
				color: $charge-color-hui;

				.charge-btn {
					width: 200rpx;
					height: 130rpx;
					background-color: #F6F7F9;
					border-radius: 12rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border: 2rpx solid $shadow-color;

					.charge-number {
						font-size: 28rpx;
						font-weight: 500;
					}

					.present-number {
						font-size: 24rpx;
						font-weight: 500;
					}

					&.active {
						border: 0;
						background-color: #F6F7F9;
						box-shadow: 0px 2rpx 4rpx 0px $main-text;
						background-color: $number-rich;
						color: $white-notion;
					}
				}
			}

			// 说明和价钱
			.description {
				width: 100%;
				padding: 2rpx 36rpx;
				display: flex;
				flex-direction: column;

				.desc-title {
					font-family: 'charge';
					font-size: 24rpx;
					font-weight: 500;
				}

				.desc-detail {
					height: 110rpx;
					width: calc(100% - 72rpx);
					height: 110rpx;

					span {
						font-size: 24rpx;
						font-weight: 400;
						color: $list-content;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 3; //行数
						line-clamp: 3;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}
				}

				.flex-start {
					display: flex;
					align-items: center;
					justify-content: flex-start;
				}

				.pay-money-number,
				.get-money-number {
					margin-top: 12rpx;
					font-family: 'charge';

					.text {
						font-size: 24rpx;
						font-weight: 500;
						color: $charge-color-hui;
					}

					.num {
						font-size: 32rpx;
						font-weight: 500;
						color: $number-rich;
					}
				}
			}
		}

		.charge-now-btn {
			position: fixed;
			bottom: 60rpx;
			left: 50%;
			transform: translate(-50%);
			font-family: 'charge';
			letter-spacing: 2rpx;
			width: 700rpx;
			height: 90rpx;
			border-radius: 12rpx;
			font-size: 48rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: $number-rich;
			color: $white-notion;
		}
	}
</style>
